<template>
	<u-tabbar :value="currentTabbar" @change="handleTabbar" activeColor="#06C168" inactiveColor="#7A7E83"
		:placeholder="placeholder">
		<u-tabbar-item :text="$t('tabBar.home')">
			<image style="width: 34rpx;height: 35rpx;" slot="active-icon" src="@/static/tab/homeSelect.png" />
			<image style="width: 34rpx;height: 35rpx;" slot="inactive-icon" src="@/static/tab/home.png" />
		</u-tabbar-item>
		<u-tabbar-item :text="$t('tabBar.group')">
			<image style="width: 34rpx;height: 35rpx;" slot="active-icon" src="@/static/tab/groupSelect.png" />
			<image style="width: 34rpx;height: 35rpx;" slot="inactive-icon" src="@/static/tab/group.png" />
		</u-tabbar-item>
		<u-tabbar-item :text="$t('tabBar.car')">
			<image style="width: 34rpx;height: 35rpx;" slot="active-icon" src="@/static/tab/carSelect.png" />
			<image style="width: 34rpx;height: 35rpx;" slot="inactive-icon" src="@/static/tab/car.png" />
		</u-tabbar-item>
		<u-tabbar-item :text="$t('tabBar.mine')">
			<image style="width: 36rpx;height: 36rpx;" slot="active-icon" src="@/static/tab/mineSelect.png" />
			<image style="width: 36rpx;height: 36rpx;" slot="inactive-icon" src="@/static/tab/mine.png" />
		</u-tabbar-item>
	</u-tabbar>
</template>
<script>
	export default {
		props: {
			currentTabbar: {
				type: Number,
				default: 0
			},
			placeholder: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleTabbar(e) {
				switch (e) {
					case 0:
						uni.reLaunch({
							url: '/pages/tabBar/home'
						})
						break
					case 1:
						uni.reLaunch({
							url: '/pages/tabBar/group'
						})
						break
					case 2:
						uni.reLaunch({
							url: '/pages/tabBar/car'
						})
						break
					case 3:
						uni.reLaunch({
							url: '/pages/tabBar/mine'
						})
						break
				}
			},
		}
	}
</script>

<style>
</style>